<template>
	<view class="container">
		<uni-list>
			<uni-list-item showArrow>
				<template v-slot:header>
					<uni-file-picker limit="1"  :del-icon="false" disable-preview
						file-mediatype="image">
						<image :src="userInfo.avatar" style="width: 100%;height: 100%;"></image>
					</uni-file-picker>
				</template>
				<template v-slot:body>
					<text class="slot-box slot-text">{{userInfo.userName}}</text>
				</template>
				<template v-slot:footer>
					<text class="slot-box slot-text">123123</text>
				</template>
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" showArrow title="用户名" :rightText="userInfo.userName" />
			<uni-list-item :show-extra-icon="true" showArrow title="昵称" rightText="" />
			<uni-list-item :show-extra-icon="true" showArrow title="手机" :rightText="userInfo.userPhone" />
			<uni-list-item clickable @click="navTo('/pages/personal/update/update-password')" :show-extra-icon="true" showArrow title="修改密码" />
		</uni-list>
		<uni-list class="m-t-10">
			<uni-list-item :show-extra-icon="true" showArrow title="版本" rightText="1.0.0" />
		</uni-list>
		<!-- 退出登录 -->
		<view class="lagOut m-t-10">
			<button type="default" @click="loginOut()">退出登录</button>
		</view>
	</view>
</template>


<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				defaultIcon: 'icon-default',
				aspectFill: ''
			}
		},
		methods: {
			...mapMutations(['logout']),
			loginOut() {
				this.logout()
				uni.navigateTo({
					url: "/pages/personal/login"
				})
			},
			afterRead1(res) {
				console.info(222)
				this.uploadImageToQiniu(res);
			},
			uploadImageToQiniu(file) {
				console.info(111)
				console.info(file);
			},
			navTo(url) {
				console.info(url)
				if (this.isAuth) { 
					uni.navigateTo({url:url})
				} else {
					uni.navigateTo({"url":'/pages/personal/login'})
				}
			}
		},
		computed: {
			...mapState(['userInfo','isAuth']),
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.m-t-10 {
			margin-top: 10upx;
		}

		.lagOut {
			background-color: #fff;

			button {
				color: #55aa00;
				background-color: #fff;
				font-size: 28upx;
			}

		}

		.default-avatar {
			margin-left: 20upx;
		}



	}
</style>